<template>
<transition name="detail">
	<div class="detailwarp">

		<div class="doubletipwarp" v-show="showdoubletip">
		<div class="topchose" @click="tomain1" :style="backdetailimg">
			<p>{{showdoubletext}}</p>
			<img src="../../../static/images/goon.png" @click="tomain1"/>
			<img src="../../../static/images/stop.png" @click.stop.prevent="topay"/>
		</div>
		</div>


		<div class="pre-change" v-if="showpreviouschange">
			<div class="page-warp">
				<div class="infotop">
					<label for="phone">您当前预留手机号码为</label>
					<input v-model="previousdata.phone" name="phone" class="p-phone">
					<label for="word">您当前预留取餐暗号为(选填)</label>
					<input v-model="previousdata.other" name="word" class="p-word">
				</div>
				<p>您选择的到店时间为</p>
				<div class="infotime">
					<div class="time-left">
						<span>当前选择时间为</span>
						<span>{{previousdata.time}}</span>
					</div>
					<div class="time-right">
						<ul>
							<li v-for="(item,index) in timearr" :class='{"chosed":index==chosedindex}' :key="index" @click="chosetime(item,index)">{{item}}</li>
						</ul>
					</div>
				</div>
				<div class="infobottom">
					<p @click="savepreviousdata()">
					确定
					</p>
				</div>
			</div>
		</div>
		<div class="dt-top">{{init}}
			<i class="i back icon-arrow_lift" @click="tomain"></i>
			订单详情
		</div>
		<div class="cont-war" ref="warper">
			<div class="ww" style="overflow:auto;padding-bottom:4rem;">
		
		<div class="detailsend" v-if="numdata" >
			<div class="send-chose-left">请选择本次就餐人数</div>
			<div class="send-chose-right" >
				<span :class="{nummoveing:item==personrealnum}" v-for="(item,index) in showednumarr" class="nummove" :key="index" @click="chosednum(item)">{{item}}</span>
				<i style="padding:0.1rem 0.1rem;color:black;" class="i unchosed icon-keyboard_arrow_right" @click="chosepersonnum"></i>
			</div>
		</div>

		<div style="width: 90%;margin: auto;">
			<split2></split2>
		</div>

		<div class="previous" v-show="showprevious" @click="changeprevious">
			<h3>预点餐信息</h3>
			<p>到店时间：{{previousdata.time}}</p>
			<p>电话：{{previousdata.phone}}</p>
			<p>取餐暗号：{{previousdata.other}}</p>
		</div>	
		<div class="detailchose">
			<ul>
				<li v-for="(item,index) in chosedfood" :key="index">
					<img :src="item.src | imgurl" />
					<div class="chosefooddetail">
						<p>{{item.foodname}}({{item.listName}})</p>
						<span class="d-num">x{{item.num}}</span><span class="d-price">￥{{item.price}}  </span>
					</div>
				</li>
			</ul>
		</div>
		<div style="width: 90%;margin: auto;">
			<split2></split2>
		</div>
		<div class="ordermoney">
			<p v-if="showrenshucause" v-for="(item,index) in numdata" :key="index">
				<span>{{item.tablewarename}}</span><span>{{item.price*personrealnum}}</span>
			</p>
			<p>
				<span>订单总价</span><span>￥{{totalprice}}</span>
			</p>
			<p>
				<span style="color:red;">红包</span><span style="color:red;">-{{hongbaomoney}}</span>
			</p>
			<p>
				<span style="color:red;">实付价格</span><span style="color:red;">￥{{totalprice-hongbaomoney | two}}</span>
			</p>
		</div>
		


		<div class="detailword">
			<p class="beizhu" style="vertical-align:top;">
			<span>备注:</span><textarea ref="textara" v-model="beizhu"></textarea>
			</p>
			<p class="quickchose">快捷选项</p>
			<ul>
				<li v-for="(item,index) in quickchose" @click="push(item)" :key="index">{{item}}</li>
			</ul>
		</div>
		<div class="detailsend">
			<div class="send-chose-left">是否配送</div>
			<div class="send-chose-right" @click="showsend1">
				<i class="i unchosed icon-check_circle"></i>
			</div>
			<div class="sendinfo" v-show="showsend">
				<h3>配送信息</h3>
				<p>姓名：{{addressname}}</p>
				<p>电话：{{addressphone}}</p>
				<p>地址：{{addressaddress}}</p>
			</div>
		</div>
		

		</div>
		</div>
		<transition name="numchosed">
			<div v-if="shownumchosed" class="personnumchosed">
				<ul>
					<li v-for="(item,index) in personnum" :key="index" @click="chosednum(item)">
						{{item}}
					</li>
				</ul>
			</div>
			</transition>
		<transition name="showpay">
		<div  class="topaycut">
			<div class="sale">红包：{{hongbaomoney}}</div>
			<div class="totalmoney">合计：￥{{totalprice-hongbaomoney | two}}</div>
			<div class="topay" @click="readytopay">提交订单</div>
		</div>
		</transition>
	</div>
	</transition>
</template>

<script>
import qs from 'qs'
	import BScroll from 'better-scroll'
	import split2 from '../shopcart/split2'
	export default {
		data(){
			return {
				ab:1,
				numdata:'',
				shownumchosed:false,
				addressname:'',
				addressphone:'',
				addressid:'',
				beizhu:'',
				showdoubletip:false,
				showdouletext:'',
				chosedindex:'',
				addressaddress:'',
				previousdata:{
					type:'',
					time:"",
					phone:'',
					other:''
				},
				showsend:false,
				showprevious:false,
				showpreviouschange:false,
				showpay:false,
				productlist:[],
				showdiscount:false,
				discountmoney:'0',
				discountdata:{},
				totalprice:0,
				youhuilist:[],
				quickchose:[
				"不吃辣","少放辣","不要香菜","不要蒜"
				],
				timearr:[],
				chosed:[],
				backdetailimg:{
					backgroundImage:"url("+require("../../../static/images/double.jpg")+")",
					backgroundSize:'100% 100%'
				}
			}
		},
		props:["goods"],
		methods:{
			chosednum:function(data){
				this.$store.commit("getpersonnum",data)
				this.shownumchosed=false
				for(var i=0;i<8;i++){
					if(data<=(i+1)*3 && data>i*3){
						this.$store.commit("getnumarr",[i*3+1,i*3+2,i*3+3])
					}
				}
			},
			chosepersonnum:function(){
				this.shownumchosed=true
			},
			getpersonnum:function(){
				var now=new Date()
				if(localStorage.numchosed&&(localStorage.numchosedtime-now.getTime())<7200000){
					return
				}
				var _this=this
				this.$http.post(sessionStorage.baseurl+'/a/phone/getTableware',qs.stringify({sellerid:sessionStorage.sellerid,token:sessionStorage.token,openid:sessionStorage.openid}))
				.then(res=>{
					if(res.data.code==1){
						_this.numdata=res.data.data
						console.log(_this.numdata)
					}
					else{
						alert(res.data.msg)
					}
				})
				.catch(error=>{
					alert(error)
				})
			},
			readytopay:function(){
				if(!this.cantijiao){
					alert("请选择就餐人数，将获得根据人数提供的对应服务")
					return
				}
				if(sessionStorage.doubletype==0&&!this.$store.state.doubleused){
					this.showdoubletext="再点一道菜即可获得两个红包哦"
					this.showdoubletip=true
				}
				else if(sessionStorage.doubletype>0&&!this.$store.state.doublenumused&&sessionStorage.doubletype>this.$store.state.totalcount){
					this.showdoubletext="再点"+(sessionStorage.doubletype-this.$store.state.totalcount)+"个菜即可获得两个红包哦"
					this.showdoubletip=true
				}
				else if(sessionStorage.doubletype>0&&!this.$store.state.doublenumused&&!this.$store.state.doubleused&&sessionStorage.doubletype<=this.$store.state.totalcount){
					this.showdoubletext="再点一道菜即可获得两个红包哦"
					this.showdoubletip=true
				}
				else{
					this.topay()
				}
			},
			savepreviousdata:function(){
				if(!this.isphone(this.previousdata.phone)){
					alert("请输入正确的电话号码")
					return
				}
				else if(this.previousdata.time==""){
					alert("暂未选择时间")
					return
				}
				else{
					this.showpreviouschange=false
				}
			},
			chosetime:function(data,index){
				this.previousdata.time=data
				this.chosedindex=index
			},
			occur:function(){
				return
			},
			changeprevious:function(){
				this.getTime()
				this.showpreviouschange=true
			},
			getpreviousdata:function(){
				if(sessionStorage.previous){
					var previous=JSON.parse(sessionStorage.previous)
					this.previousdata.phone=previous.phone;
					this.previousdata.time=previous.time;
					this.previousdata.other=previous.other;
					this.previousdata.type=sessionStorage.chose
					this.showprevious=true
				}
			},
			getsenddata:function(){
				if (sessionStorage.orderAddress&&this.totalprice>20) {
					var addr = JSON.parse(sessionStorage.orderAddress)
					this.addressid = addr.id
					this.addressname = addr.consignee
					this.addressphone = addr.mobile
					this.addressaddress = addr.address
					this.showsend=true
				}
			},
			tomain:function(){
				this.$router.push("/")
			},
			tomain1:function(){
				this.$store.commit("getdoublefirst",parseFloat(this.totalprice-this.hongbaomoney).toFixed(2))
				if(sessionStorage.doubletype==0){
					this.$store.commit("getdoubleused")
				}
				else if(sessionStorage.doubletype>0&&sessionStorage.doubletype<this.$store.state.totalcount){
					this.$store.commit("getdoubleused")
				}
				else if(sessionStorage.doubletype>0){
					this.$store.commit("getdoublenumused")
				}
				this.$router.push("/")
			},
			showsend1:function(){
				if(this.showsend){
						this.showsend=!this.showsend
						this.addressid=''
				}
				else{
					if(this.$store.state.totalprice<20){
						alert("本店满20元配送")
						return
					}
					window.location.href="setaddress.html"
				}
			},
			push:function(index){
				this.beizhu+=(index+"  ")
			},
			topay:function(){
				
				var remaked="";
				this.chosed.forEach(function(item){
					remaked+=item;
				})
				remaked+=this.beizhu;
				if(this.showprevious){
					remaked+="预点餐  "+this.previousdata.type+"  电话："+this.previousdata.phone+"  暗号："+(this.previousdata.other?this.previousdata.other:"无")+"  预计到店时间"+this.previousdata.time
				}
				var  occurorderdata={
					totalprice:parseFloat(this.totalprice).toFixed(2),
					totalnowprice:parseFloat(this.totalprice-this.hongbaomoney).toFixed(2),
					goodsprice:this.discountmoney,
					phone:sessionStorage.openid,
					sellerid:sessionStorage.sellerid,
					tableno:sessionStorage.tableno,
					payType:sessionStorage.payType,
					productlist:this.productlist,
					youhuilist:[],
					shAddressId:this.addressid,
					redPacketmoney:this.hongbaomoney,
					remarks:remaked,
					redstatus:sessionStorage.tape,
					oldOrderId:'',
					pcount:typeof(this.personrealnum)=='number'?this.personrealnum:0
				}
				console.log(occurorderdata)
				
				this.$http.post(sessionStorage.baseurl+"/a/phone/saveOrder",qs.stringify({orders:JSON.stringify(occurorderdata),token:sessionStorage.token,openid:sessionStorage.openid}))
				.then(res=>{
					if(res.data.code==1){
							this.$store.commit("getOrderid",res.data.data)
							this.$router.push("/orderpay")
					}
					else{
						alert(res.msg)
					}
				})
				.catch(error=>{
					alert(error)
				})
				

			},
			remove:function(index){
				this.chosed.splice(index,1)
			},
			candiscount:function(){
				if(this.discountdata.enoughamount){
					if(this.$store.state.totalprice>parseFloat(this.discountdata.enoughamount)){
						this.showdiscount=true
						
						var nowTime = new Date().getTime()
			            var startTime =new Date(this.discountdata.starttime.replace(/-/g,'/')).getTime()
			            var endTime =new Date(this.discountdata.endtime.replace(/-/g,'/')).getTime()
			            if(nowTime>startTime&&nowTime<endTime){
				            if(this.discountdata.discounttype=='fixed'){
					if(this.$store.state.totalprice>this.discountdata.amount){
						this.discountmoney=this.discountdata.amount
					}else{
						this.discountmoney=0
					}
				}else if(this.discountdata.discounttype=="random"){
					if(parseFloat(this.$store.state.totalprice)>=parseFloat(this.discountdata.amount)&&parseFloat(this.$store.state.totalprice)>=parseFloat(this.discountdata.minline)){
						var maxline =parseFloat(this.discountdata.maxline)>parseFloat(this.$store.state.totalprice)?this.$store.state.totalprice:this.discountdata.maxline
						var price =parseFloat((Math.random()*maxline).toFixed(2)) 
						for(var i=0;;i++){
							if(price<this.discountdata.minline){
								price = (Math.random()*maxline).toFixed(2)
							}else{
								break
							}
						}
						this.discountmoney = price
					}else{
						this.discountmoney = 0
					}
				}
				if(this.discountmoney>0){
						this.youhuilist=[{
								id:this.discountdata.id,
								name:"扫码立减",
								amount:this.discountmoney
						}
						]
				}
			}
			            else{
			            	alert("该商家扫码立减已过期")
			            	this.discountmoney = 0
			            }
					}
					else{
						this.discountmoney = 0
						return false
					}
				}
				else {
					this.discountmoney = 0
					return false
				}
			},
			isphone:function(phone){
				var pattern = /^1[34578]\d{9}$/; 
 				return pattern.test(phone);
			},
			getTime:function(){
				var _this=this
				var H=new Date().getHours()
				var M=new Date().getMinutes()
				if(M>30){
					var htul="<li>马上到店</li>"
					var F=false
					var T=parseInt(24-H)*2
					for(var i=0;i<T-1;i++){
						if(!F){
							_this.timearr.push(H+':30' +'-'+(parseInt(H)+1)+':00')
							F=!F
							H++
							}
						else{
							_this.timearr.push(H+':00' +'-' +H+':30')
							F=!F
						}
						}
				}
				else{
					_this.timearr.push("马上到店")
					var F=false
					var T=parseInt(24-H)*2
					for(var i=0;i<T-1;i++){
						if(!F){
							_this.timearr.push(H+':00' +'-' +H+':30')
							F=!F
						}
						else{
							_this.timearr.push(H+':30' +'-'+(parseInt(H)+1)+':00')
							F=!F
							H++
						}
						}
				}
			},
			initscroll:function(){
				var _this=this
				setTimeout(function(){
					_this.foodScroll=new BScroll(_this.$refs.warper,{
	    			click:true,
	    			probeType:3
	    		});
	    		   _this.foodScroll.on("scroll",function(){
	    		   	 _this.$refs.textara.blur()
	    		   })
				})
			
			}
		},
		watch:{
			discountmoney:function(){
				var _this=this
				this.$store.commit("getdiscount",this.discountmoney);
				
			}
		},
		mounted:function(){
			this.getpreviousdata()
			this.getpersonnum()
			var _this=this
			/*     注释掉原来的扫码立减
			this.$http.post(sessionStorage.baseurl+"/a/phone/getSellerActQrBySellerId",qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
			.then(function(res){
				if(res.data.code==1){
					
				_this.$nextTick(function(){
					_this.discountdata=res.data.data[0]
					_this.candiscount()
				})
				}
				else{
					alert(res.msg)
				}
			})
			.catch(function(error){
				alert(error)
			})*/
		},
		computed:{
			showednumarr:function(){
				return this.$store.state.shownumarr
			},
			personrealnum:function(){
				return this.$store.state.personnum
			},
			cantijiao:function(){
				if(this.numdata){
					return typeof(this.personrealnum)=='number'
				}
				else
				return true
			},
			showrenshucause:function(){
				return typeof(this.personrealnum)=='number'
			},
			personnum:function(){
				var arr=[]
				for(var i=1;i<25;i++){
					arr.push(i)
				}
				return arr
			},
			init:function(){
				if(this.goods.length>0){
					this.$nextTick(function(){
						
						this.initscroll()
					})
				}
			},
			hongbaomoney:function(){
				var tot=0;
				this.productlist.forEach(function(in1){
					tot+=in1.firstredPacket+in1.secondredPacket
				})
				this.$store.commit("gethongbaototal",tot)
				return tot.toFixed(2)
			},
			chosedfood:function(){
				this.productlist=[]
				var _this=this
				var chosedfood=[]
				var totalprice=0;
				var hongbaonum11=0
				var whetherdouble=false
				this.goods.forEach(function(goods){
					goods.list.forEach(function(good){
						good.listin.forEach(function(goodin){
							if(goodin.num>0){
								var hongbaototal=0;
								if(goodin.hongbao.length>0){
										hongbaonum11+=goodin.hongbao.length
										goodin.hongbao.forEach(function(m){
											hongbaototal+=parseFloat(m)
										})
									}
									if(goodin.doublehongbao){
										whetherdouble=true
									}

								chosedfood.push(goodin)
								totalprice+=goodin.num*goodin.price
								_this.productlist.push({
									id:goodin.foodid,
									name:goodin.foodname,
									price:parseFloat(goodin.price).toFixed(2),
									nowprice: parseFloat(goodin.price).toFixed(2),
									num: parseInt(goodin.num),
									isrulefood: 0,
									firstredPacket:hongbaototal,
									secondredPacket:goodin.jingxiused,
									hongbao:goodin.hongbao,
									specsid:goodin.foodspecsid,
									specsname:goodin.listName
								})
							}
						})
					})
				})

					this.$store.commit("gethongbaonum",hongbaonum11);
				if(whetherdouble){
					this.$store.commit("getdoubleused");
				}

				
				if(this.numdata&&typeof(this.personrealnum)=="number"){
					this.numdata.forEach(function(num){
					totalprice+=parseFloat(num.price*_this.personrealnum)
				})
				}
				totalprice=parseFloat(totalprice).toFixed(2)
				this.totalprice=totalprice
				this.$store.commit("gettotalprice",totalprice);
				this.getsenddata()
				return chosedfood
			}
		},
		 filters: {
        imgurl: function(value) {
            return 'http://www.dadu999.com'+value;
				},
				two:function(value){
					return parseFloat(value).toFixed(2)
				},
		total:function(data){
				var to=0
				data.hongbao.forEach(function(indata){
					to+=parseFloat(indata)
				})
				to+=data.jingxiused
				if(to.toFixed(2)==0){
					return ''
				}
				return '红包抵扣'+to.toFixed(2)
			}
			
    },
		components:{
			split2
		}
	}
</script>

<style lang="stylus" scoped>
	.detailwarp
	  background #f3f5f7
	  display flex
	  flex-direction column
	  height 100%
	  width 100%
	  .doubletipwarp
	    position fixed
	    width 100%
	    z-index 1000
	    height 100%
	    background rgba(0,0,0,0.4)
	    .topchose
	      position fixed
	      z-index 1000
	      width 6rem
	      height 7rem
	      box-sizing border-box
	      padding 0.2rem
	      left 0.75rem
	      top 2rem
	      img
	        width 70%
	        position absolute
	        left 15%
	        bottom 1.5rem
	        &:last-child
	          bottom 0.5rem
	      p
	        width 70%
	        position absolute
	        height 2.5rem
	        color black
	        left 14%
	        top 1.5rem
	        font-size 0.25rem
	        line-height 0.3rem
	      span
	        float left
	        width 100%
	        height 1rem
	        font-size 0.3rem
	        line-height 1rem
	        text-align center
	        background #00b43c
	        color white
	        margin-top 0.25rem
	  .pre-change
	    position fixed
	    z-index 100
	    background:rgba(0,0,0,0.7)
	    width 100%
	    overflow auto
	    height 100%
	    left 0
	    top 0
	    .page-warp
	      width 90%
	      height 90%
	      min-height 10rem
	      margin 5% auto
	      background #fff
	      padding 0.1rem
	      display flex
	      flex-direction column
	      p
	        height 10%
	        font-size 0.35rem
	      .infotime
	        width 100%
	        height 30%
	        display flex
	        flex-direction row
	        div
	          width 40%
	          margin 0 5%
	          border 1px solid #ccc
	          height 3rem
	          display flex
	          flex-direction column
	          justify-content space-between
	          span
	            font-size 0.3rem
	            display block
	            line-height 1.6rem
	        div.time-right
	          ul
	            overflow auto
	            height 100%
	            li
	              height 20%
	              width 100%
	              font-size 0.3rem
	              text-align center
	              line-height 0.6rem
	            li.chosed
	              text-decoration underline
	      .infobottom
	        display flex
	        flex-direction column
	        justify-content center
	        text-align center
	        font-size 0.3rem
	        line-height 0.6rem
	        height 20%
	      .infotop
	        width 100%
	        height 40%
	        label
	          width 100%
	          display block
	          height 25%
	          margin-top 0
	          font-size 0.33rem
	          line-height 1rem
	        input
	          width 80%
	          display block
	          margin auto
	          height 15%
	          margin-left 10%
	          font-size 0.33rem
	          border 1px solid black
	  .personnumchosed
	    position fixed
	    background white
	    bottom 5rem
	    box-shadow 0 0 0.1rem 0.1rem black
	    left 10%
	    width 80%
	    height auto
	    ul
	      width 100%
	      height auto
	      overflow auto
	      li
	        width 16.66%
	        height 1rem
	        box-sizing border-box
	        box-shadow 0.02rem 0.02rem 0 0 black
	        line-height 1rem
	        font-size 0.3rem
	        text-align center
	        color black
	        float left
	  .cont-war
	    flex 1
	    overflow hidden
	  .topaycut
	    box-shadow 10px 10px 5px #888888
	    width 100%
	    flex-basis 1rem
	    background #141d27
	    bottom 0
	    left 0
	    display flex
	    flex-direction row
	    .topay
	      background RGB(255,97,3)
	      height 1rem
	      line-height 1rem
	      text-align center
	      font-size 0.3rem
	      color white
	      width 2rem
	    .cantsubmit
	      background #ddd
	    .sale
	      flex 1
	      border-top 1px solid #ddd
	      height 1rem
	      line-height 1rem
	      font-size 0.35rem
	      color white
	    .totalmoney
	      flex 1
	      border-top 1px solid #ddd
	      height 1rem
	      line-height 1rem
	      font-size 0.3rem
	      padding-right 0.2rem
	      color white    
	  .ordermoney
	    width 90%
	    margin auto
	    background white
	    overflow auto
	    p
	      width 100%
	      box-sizing border-box
	      padding 0.2rem
	      overflow auto
	      &:after
	        content ''
	        border-bottom 1px solid #f3f5f7
	        float left
	        width 100%
	        display block
	      span
	        font-size 0.3rem
	        line-height 0.5rem
	        display block
	        overflow auto
	        &:first-child
	          float left
	        &:last-child
	          float right    
	  .detailchose
	    width 90%
	    margin auto
	    overflow auto
	    background white
	    ul
	      overflow auto
	      box-sizing border-box
	      padding 0.2rem
	      li
	        width 100%
	        box-sizing border-box
	        padding 0.1rem
	        display flex
	        flex-direction row
	        img
	          width 1.5rem
	          height 1.5rem
	          display block
	        .chosefooddetail
	          flex 1
	          height 1.5rem
	          position relative
	          p
	            position absolute
	            width 100%
	            font-size 0.3rem
	            text-align left
	            text-indent 0.1rem
	            left 0.3rem
	            top 0.3rem
	          .d-num
	            position absolute
	            left 0.3rem
	            bottom 0.3rem
	            font-size 0.3rem
	          .d-price
	            font-size 0.3rem
	            position absolute
	            right 0.5rem
	            bottom 0.3rem    
	            i
	              font-size 0.2rem
	              color red
	  .detailword
	    width 90%
	    margin auto
	    overflow auto
	    margin-top 0.2rem
	    background white
	    .beizhu
	      padding 0.2rem
	      display:flex
	      flex-direction row
	      align-items center
	      justify-content space-around
	    span
	      font-size 0.3rem
	      line-height 0.6rem
	    textarea
	      width 80%
	      border 1px solid #ddd
	    ul
	      box-sizing border-box
	      padding 0.2rem
	      width 100%
	      overflow auto
	      li
	        float left
	        width 20%
	        margin-left 4%
	        margin-top 0.2rem
	        border-radius 5px
	        height 0.5rem
	        border-radius 0.05rem
	        border 1px solid #ddd
	        font-size 0.3rem  
	        color black
	        line-height 0.55rem
	        text-align center
	    .quickchose
	      font-size 0.3rem
	      line-height 0.5rem
	      text-align left
	      box-sizing border-box
	      padding 0.2rem 
	    .wordtop
	      width 100%
	      overflow auto
	      height auto
	      font-size 0.3rem
	      line-height 0.5rem
	      text-align left
	      box-sizing border-box
	      padding 0.2rem
	      span
	        background #52ce5c
	        line-height 0.5rem
	        height 0.5rem
	        margin-left 0.1rem
	        color white
	        font-size 0.25rem
	        border-radius 0.1rem
	        padding 0.1rem 
	        box-sizing border-box
	  .previous
	    width 90%
	    margin auto
	    margin-top 0.2rem
	    overflow auto
	    background white
	    box-sizing border-box
	    padding 0.1rem 0.2rem
	    line-height 0.6rem
	    font-size 0.3rem
	    text-align left
	  .detailsend
	    width 90%
	    margin auto
	    margin-top 0.2rem
	    overflow auto
	    background white
	    .sendinfo
	      width 100%
	      overflow auto
	      font-size 0.3rem
	      line-height 0.6rem
	      text-align left
	      padding-left 0.2rem
	      box-sizing border-box
	    .send-chose-left
	      width 50%
	      height 0.8rem
	      line-height 0.9rem
	      text-align left
	      text-indent 0.2rem
	      float left
	      font-size 0.3rem
	      animation move 1s linear infinite
	    .send-chose-right
	      width 47%
	      height 0.8rem
	      line-height 0.9rem
	      text-align right
	      text-indent 0.2rem
	      float left  
	      font-size 0.3rem
	      .unchosed
	        color #ddd
	      .nummove
	        box-sizing border-box
	        padding 0 0.21rem
	        margin 0 0.03rem
	        box-shadow 0 0 0.01rem 0.005rem black
	      .nummoveing
	        background RGB(255,97,3)
	  .dt-top
	    width 100%
	    flex-basis 0.8rem
	    text-align center
	    line-height 0.8rem
	    font-size 0.3rem
	    .back
	      position absolute
	      height 0.6rem
	      top 0.1rem
	      left 0.2rem
	      font-size 0.3rem
	      line-height 0.6rem
	.detail-enter
	  opacity 0
	.detail-enter-active
	  transition 1.6s

	@keyframes move{
	  0%{
	    color black
	  }
	  50%{
	    color red
	  }
	  100%{
	    color black
	  }
	}
	
	.numchosed-enter-active
	  transition 0.5s 
	.numchosed-enter,.numchosed-leave-to
	  transform translateY(100%)
	.numchosed-enter-to,.numchosed-leave
	  transform translateY(0)
</style>